<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>封装 AJAX 对象</title>
    </head>
    <body>
        <script>
            /**
             * 封装一个对象 $
             * get
             *      url,  params,  callback
             *      $.get('http://localhost/server', {a: 100, b: 200}, function(data){
             *          console.log(data);
             *      })
             * post
             *      url,  params,  callback
             *      $.post('http://localhost/server', {a: 100, b: 200}, function(data){
             *          console.log(data);
             *      })
             */

            let $ = {
                get: function (url, params, callback) {
                    //实例化对象
                    let xhr = new XMLHttpRequest();
                    //params 对象转为 字符串  { a: 100, b: 200 }   =>  a=100&b=200
                    //遍历 params 对象
                    let str = "";
                    for (let i in params) {
                        str += `${i}=${params[i]}&`;
                    }
                    //去除字符串最后的一个 &       a=100&b=200&
                    str = str.slice(0, -1);
                    //拼接
                    url += "?" + str;
                    //初始化
                    xhr.open("get", url);
                    //发送
                    xhr.send();
                    //处理结果
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            //处理响应体的结果
                            callback(xhr.response);
                        }
                    };
                },

                post: function (url, params, callback) {
                    //实例化对象
                    let xhr = new XMLHttpRequest();
                    //params 对象转为 字符串  { a: 100, b: 200 }   =>  a=100&b=200
                    //遍历 params 对象
                    let str = "";
                    for (let i in params) {
                        str += `${i}=${params[i]}&`;
                    }
                    //去除字符串最后的一个 &       a=100&b=200&
                    str = str.slice(0, -1);
                    
                    //初始化
                    xhr.open("post", url);
                    //设置请求体内容的类型
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    //发送
                    xhr.send(str);
                    //处理结果
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            //处理响应体的结果
                            callback(xhr.response);
                        }
                    };
                },
            };

            // $.get(
            //     "http://localhost/server",
            //     { a: 100, b: 200 },
            //     function (data) {
            //         alert(data);
            //     }
            // );

            $.post(
                "http://localhost/server",
                { a: 100, b: 200 },
                function (data) {
                    console.log(data);
                }
            );
        </script>
    </body>
</html>
